<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>天顺商贸</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="msapplication-TileColor" content="#da532c">
        <meta name="theme-color" content="#ffffff">
        <link rel="stylesheet" href="__PUBLIC__/Home/login/animate.min.css" type="text/css">
        <link rel="stylesheet" href="__PUBLIC__/Home/login/glyphicons.css" type="text/css">
        <link rel="stylesheet" href="__PUBLIC__/Home/login/font-awesome.min.css" type="text/css">
        <link rel="stylesheet" href="__PUBLIC__/Home/login/material-design-icons.css" type="text/css">
        <link rel="stylesheet" href="__PUBLIC__/Home/login/bootstrap.min.css" type="text/css">
	
		  <script src="__PUBLIC__/jquery-1.8.2.min.js"></script>
		
        <link rel="stylesheet" href="__PUBLIC__/Home/login/app.css" type="text/css">
        <link rel="stylesheet" href="__PUBLIC__/Home/login/font.css" type="text/css">
        <style>body, html { font-family: "Microsoft YaHei",微软雅黑,"Microsoft JhengHei",华文细黑, STHeiti, MingLiu !important; background: #2A333A !important; } body{ background: url(__PUBLIC__/Home/login/loginbackground.png) center !important; background-repeat:no-repeat; background-size:cover !important; } .layer{ background:rgba(0,0,0,.4); width:100%; height:100%; position:absolute !important; } .box-color{ background:rgba(255, 255, 255, 0.65); } .primary{ background:#907733; cursor:pointer; } .primary:hover, .primary:target, .primary:focus{ background:#907733 !important; } .md-input:focus, .md-input.focus{ border-color:#907733 !important; } .md-input:focus ~ label, .md-input.focus ~ label{ color:#907733 !important; }</style></head>
    
	<script src="__PUBLIC__/jquery.rotate.min.js"></script>
	
		<script>
				$(function(){
				var angle = 0;
				setInterval(function(){
					  angle+=3;
					 $("#img3").rotate(angle);
				},50);



				});
			</script>
    <body class=" pace-done" ui-class="">
        <div class="pace  pace-inactive">
            <div class="pace-progress" data-progress-text="100%" data-progress="99" style="transform: translate3d(100%, 0px, 0px);">
                <div class="pace-progress-inner"></div>
            </div>
            <div class="pace-activity"></div>
        </div>
        <div class="layer">
            <div style="position: absolute;  right: 20px; padding-top:10px">
                <a style="color:#f5f5f5;margin:0 10px;">
                    <img style="margin-right:5px" src="__PUBLIC__/Home/login/lang-cn.png">中文</a>
                <a style="color:#f5f5f5;margin:0 10px;">
                    <img style="margin-right:5px" src="__PUBLIC__/Home/login/lang-en.png">English</a></div>
            <div class="app" id="app">
                <div class="" align="center" style="max-width:500px;margin:auto;padding-top:10vh;color:blue;">
                    <div width="200">天顺商贸</div></div>
                <div class="center-block w-xxl w-auto-xs p-y-md">
                    <div hidden="" class="navbar" style="min-height:250px;">
                        <br></div>
                    <div class="p-a-md box-color r box-shadow-z1 text-color m-a">
                        <div class="m-b text-sm" align="center">天顺商贸账号登入</div>
                        <form id="form" role="form" method="post">
                            <div class="md-form-group float-label">
                                <input type="text" name="username" class="md-input" onblur="ablur()">
                                <label>账号名称</label>
							</div>
                            <div class="md-form-group float-label">
                                <input type="password" name="password" class="md-input" onblur="ablur()">
                                <label>密码</label>
							</div>
                            <div class="md-form-group float-label" align="center" style="padding:0px">
                                <a href="javascript:void(0)"  onclick="changeverify()">
									<img id="verifyImg" src="{:U('Login/getVerify',['id'=>'login'])}" style="width:60%;border:1px solid rgba(0, 0, 0, 0.15);height:47px;">
								</a>
							</div>
                            <div class="md-form-group float-label">
                                <input type="text" name="code" class="md-input" style="border: 1px solid" onblur="ablur()">
                                <label>请输入安全代码</label>
                                <a href="javascript:changeverify();">请点击这里取得新代码</a></div>
                            <a>忘记密码</a>
                            <button type="button"  onclick="sub()" class="btn primary btn-block p-x-md">登入</button>
						</form>
                    </div>
                </div>
			</div>
        </div>
	</body>
		<script>
		function ablur()
		{
			event = event ? event : window.event; 
			var obj = event.srcElement ? event.srcElement : event.target; 
			if(obj.value!=='')
			{
				obj.setAttribute("class", "md-input has-value"); 
			}else{
				obj.setAttribute("class", "md-input"); 
			}
		}
		function sub(){
			$.ajax({
				 type: "POST",
				 url: "{:U('Login/checkLogin')}",
				 data: $("#form").serialize(),
				 dataType: "json",
				 error: function(request) {
					layer.closeAll('loading');
					layer.msg("{$Think.lang.系统繁忙请稍后再试}");
				},
				beforeSend: function() {
					var index = layer.load(1, {
					  shade: [0.1,'#fff'] 
					});
				},
				 success: function(data){
						layer.closeAll('loading');
						layer.msg(data['info']);
						if(data['status']==true){
							setTimeout(function(){self.location.href="{:U('User/index')}"},1000);
						}else{
							changeverify();
						}
					}
			});
		};
		
		function changeverify(){
			document.getElementById('verifyImg').src="{:U('Login/getVerify',['id'=>'login'])}";  
		}
		</script>
	<script src="__PUBLIC__/Layer/layer.js"></script>

</html>